<!--别忘记form 以及form的class-->
<form class="layui-form">
    <div id="xtree3" class="xtree_contianer"></div>
</form>

<script type="text/javascript">
    var xtree3;
    layui.use(['jquery', 'layer', 'form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        $.ajax({
            url: context + '/api/task/getListCreateAjob?tree=true',
            dataType: 'json',
            type: 'get',
            success: function (res) {
                var parentArr = listArr(res.data);
                xtree3 = new layuiXtree({
                    elem: 'xtree3'                  //必填
                    , form: form                    //必填
                    , data: parentArr       //必填
                    , isopen: false  //加载完毕后的展开状态，默认值：true
                    , ckall: false    //启用全选功能，默认值：false
                    , showCheckbox: false
                    , click: function (data) { //节点选中状态改变事件监听，全选框有自己的监听事件
                        allCheckedCk = [];
                        count = 0;
                        //设置只能单选
                        var oCks = xtree3.GetAllCheckBox();
                        // 循环数组，如果值不等于当前选中的值，将选中状态设为false
                        for (var i = 0; i < oCks.length; i++) {
                            if (oCks[i].value != data.value) {
                                $(oCks[i]).prop("checked", false)
                            }
                        }
                        allCheckedCk.push(data.elem.value);
                        title = data.elem.title;
                        key = data.elem.value;
                        form.render('checkbox');
                    }
                });

            }
        });


    });
    var title;
    var key;
    var callbackdata = function () {
        return {
            title: title
            , key: key
        };
    };
    //  获取顶级节点值的方法
    var allCheckedCk;
    var count;

    function getParent(value) {
        var parent = xtree3.GetParent(value);
        if (parent == null) {
            $(parent).prop("checked", false);
        } else {
            allCheckedCk.push(parent.value);

            $(parent).prop("checked", true);
            getParent(parent.value);
        }
    }

    function listArr(arr) {
        var root = [];
        if (arr != null || arr.length > 0) {
            for (var i = 0; i < arr.length; i++) {
                var item = {};
                item.title = arr[i].title;
                item.value = arr[i].id;
                // if (arr[i].children != null) {
                //     listChildArr(arr[i].children, item);
                // }
                root[i] = item;
            }

        }
        return root;
    }

    // function listChildArr(arr, parent) {
    //     parent.data = [];
    //     for (var i = 0; i < arr.length; i++) {
    //         var item = {};
    //         item.title = arr[i].title;
    //         item.value = arr[i].id;
    //         if (arr[i].children != null) {
    //             listChildArr(arr[i].children, item);
    //         }
    //         parent.data[i] = item;
    //     }
    //
    // }
</script>
